<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
*{
	margin: 0px;
	padding: 0px;
}
table{
	width: 800px;
	margin: auto;
	margin-top:60px;
}

table tr{
	height:35px;
	line-height: 40px;
	text-align: center;
}
form div{
	position:relative;
	width:100%;
	height:180px;
	left:0px;

}
form div span{
	margin-left:150px;
	margin-top:20px;



	
}
.m{
	width: 180px;
	height: 20px;
}
#ph{
	
}
.l{
width:100px;
height:30px;
	position: relative;
	font-size:20px;
	left: 500px;
	top:-30px;
}
</style>
<body>

	<form id="form1" action="../DeleteServlet" method="get">
		<div>
		
		<span>序号:<input type="text" class="m"value="" name="Id" id="id" ></span>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<span>姓名:<input type="text" class="m" value="" name="userName" id="userName"></span>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<span>密码:<input type="text"  class="m"value="" name="userPass" id="userPass"></span>
		<br><br>
		<span>性别:<input type="text"  class="m"value="" name="userSex" id="userSex"></span>
		<span>身份证号码:<input type="text" class="m" name="userIdCard" id="userIdCard"></span>
		<span id="ph">电话号码:<input type="text" class="m" name="userNum" id="userNum"></span>
		<br><br><br><br><br>
		<input type="submit" value="添加" class="l" onclick="onChange('AddServlet')">&nbsp;&nbsp;
		<input type="submit" value="删除" class="l" onclick="onChange('DeleteAllServlet')">&nbsp;&nbsp;
		<input type="submit" value="修改" class="l" onclick="onChange('UpdateServlet')">&nbsp;&nbsp;

		</div>
		
		<table border="1px" cellspacing="0" cellpadding="0">
			<tr>
				<td><input type="checkbox" id="allCheckBox" value="" onclick="allCloose()">全选</td>
				<td>id</td>
				<td>姓名</td>
				<td>密码</td>
				<td>性别</td>
				<td>电话号码</td>
				<td>身份证号码</td>
				<td>操作</td>
			</tr>
			<c:forEach items="${User}" var="cu">
			<tr>
				<td><input type="checkbox" name="cartCheckBox" value="${cu.uId }" class="input1"> </td>
				<td>${cu.uId}</td>
				<td>${cu.uName}</td>
				<td>${cu.uPass}</td>
				<td>${cu.uSex}</td>
				<td>${cu.uNum}</td>
				<td>${cu.uIdCard}</td>	
				<td><input type="button" value="查看" onclick="cha('${cu.uId}','${cu.uName}','${cu.uPass}','${cu.uSex}','${cu.uNum}','${cu.uIdCard}')"></td>
			</tr>
			</c:forEach>
			</table>
	</form>
	<script>
	function $(id){
		return document.getElementById(id);
	}
	function $$(s){
		return document.querySelector(s);
	}
	function $$$(s){
		return document.querySelectorAll(s);
	}	
	function allCloose(){
		var cloose=$$('#allCheckBox').checked;
		for(var i=0;i<$$$('.input1').length ;i++){
			if(cloose==true){
				$$$('.input1')[i].checked=true;
			}else{
				$$$('.input1')[i].checked=false;
			}
		}
	}
	function onChange(url){
		$("form1").action=url;
		$("form1").submit();
	}
	function show(o){
		//var val=o.parentNode.parentNode.firstElementChild.innerHTML;
		$("uid").value=o;
		$("form1").submit();
	}
	function cha(a,b,c,d,e,f){
		
		$("id").value=a;
		$("userName").value=b;
		$("userPass").value=c;
		$("userSex").value=d;
		$("userNum").value=e;
		$("userIdCard").value=f;
		
	}
	</script>

</body>
</html>